@import "../../assets/base.scss";

.topInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  width: 690rpx;
  margin: 0 auto;
  font-size: $subTitleSize;
  color: $subTitleColor;

  .text {
    width: 580rpx;

    text {
      color: $titleColor;
      font-weight: 600;
    }

    .recharge {
      color: $themeColor;
      text-decoration: underline;
    }
  }

  .button {
    display: flex;
    justify-content: center;
    width: 90rpx;

    image {
      width: 40rpx;
    }
    .isAnimation{
      animation:  rotate 800ms infinite linear;
    }
  }
  @keyframes rotate{
    from{
      transform: rotate(0);
    }
    to{
      transform: rotate(360deg);
    }
  }
}

.one {
  width: 750rpx;
  background-color: #fff;
}

.two {
  width: 750rpx;
  background-color: #fff;
  margin-top: 30rpx;
}

.three {
  width: 750rpx;
  background-color: #fff;
  margin-top: 40rpx;
}

.four{
  margin-top: 40rpx;
  background-color: #fff;
}

.module {
  display: flex;
  align-items: center;
  width: 750rpx;
  height: 90rpx;
  border-bottom: 1rpx solid $borderColor;
  font-size: $titleSize;
  color: $infoColor;

  &:last-child {
    border-bottom: 0;
  }

  &:active {
    background-color: $borderColor;
  }

  .title {
    width: 40%;
    padding-left: 30rpx;
    color: $titleColor;
  }
  // 右侧为文字
  .value-text {
    width: 60%;
    padding-right: 30rpx;
    text-align: right;
    @extend .singleLine;
  }
  // 右侧为图片
  .value-img {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    @extend .value-text;

    text {
      display: block;
      width: 360rpx;
      @extend .singleLine;
    }

    .avter {
      width: 70rpx;
    }

    .banner {
      width: 160rpx;
      height: 70rpx;
    }

    .turnImg {
      width: 30rpx;
      margin-left: 16rpx;
    }
  }
  // 右侧为文字 + 箭头
  .value-turn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    @extend .value-img;

    image {
      width: 30rpx;
      margin-left: 16rpx;
    }
  }
}

.disableActive:active {
  background-color: #fff;
}

.subTitle {
  font-size: $subTitleSize;
  color: $infoColor;
  margin-top: 10rpx;
  padding-left: 30rpx;
}
// 正文
.taskContent {
  background-color: #fff;
  margin-top: 30rpx;
  height: 140rpx;

  .value-turn {
    text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  }
}

// 提交
.button-box{
  width: 750rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 680rpx;
    height: 80rpx;
    background-color: $themeColor;
    color: #fff;
    font-size: 30rpx;
    &:active{
      opacity: 0.8;
    }
  }
}
